import React, { Component } from 'react'
import "./school.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'
import {  getApiGetSchoolInfo } from "../../axios/api"
import { UrlSearch , get } from '../../axios/localstorage';

export default class school extends Component {

    state = {
        id:'',
        data:{
            live:[],
            courses:[]
        },
        dType:0,

        isLive:0,
    }

    componentWillMount(){
        
        window.scroll(0,0);

        let id = UrlSearch('id');
        let isLive = UrlSearch('isLive');
        this.setState({
            id
        })

        if(isLive){
            this.setState({
                isLive:1
            })
        }

        this.getData(id);
    }

    getData=(id)=>{
        let param = {
            sid:id,
            type:get('type')?get('type'):0,
        }

        getApiGetSchoolInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    render() {
        return (
            <div className="school">
                <Header />
                <div className="main">
                    <div className="cen">
                        <div className="box">
                            <div className="thead">
                                <div>
                                    <img className="img" alt="" src="assets/imgs/dingwei.png" />
                                    <p className="p_point" onClick={()=>{this.gotoPage('/')}}>首页</p>
                                    <img className="icon" alt="" src="assets/img/xiaji.png" />
                                    <p className="p_point" hidden={this.state.isLive} onClick={()=>{this.gotoPage('/course')}}>课程中心</p>
                                    <p className="p_point" hidden={!this.state.isLive} onClick={()=>{this.gotoPage('/live')}}>直播中心</p>
                                    <img className="icon" alt="" src="assets/img/xiaji.png" />
                                    <p>机构详情</p>
                                </div>
                            </div>

                            

                            <div className="tmb">

                                <div className="tname">
                                    <div className="tbg" style={{backgroundImage:"url('"+this.state.data.image+"')"}}></div>
                                    <div>
                                        <h2>{this.state.data.title}</h2>
                                        {/* <p>{this.state.data.title}</p> */}
                                        <div className="spans">
                                            <span>机构课程：{this.state.data.ClassNum}课</span>
                                            <span>机构直播：{this.state.data.LiveNum}场</span>
                                        </div>
                                    </div>
                                </div>


                                <div className="desc">
                                    <div className="hname">
                                        详情介绍
                                        <div className="hcen">
                                            <span></span>
                                        </div>
                                    </div>
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.content
                                        }}></div>
                                </div>

                                <div className="ditem">
                                    <div className='dhead'>
                                        <div className={this.state.dType === 1?"dname":"dname d_chosen"} onClick={()=>{this.setState({dType:0})}}>
                                            <h2>机构课程</h2>
                                            <div className="dspan">
                                                <span></span>
                                            </div>
                                        </div>
                                        <div className={this.state.dType === 1?"dname d_chosen":"dname"} onClick={()=>{this.setState({dType:1})}}>
                                            <h2>机构直播</h2>
                                            <div className="dspan">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div hidden={this.state.dType === 0}>
                                        <div className="none" hidden={this.state.data.live.length !== 0}>
                                            <div className="cen">
                                                <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                            </div>
                                            <p>暂无直播课程</p>
                                        </div>

                                        <div className="arr">
                                            {
                                                this.state.data.live.map((item,index)=>{
                                                    return <div className="item" key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                                                <div className="itop" style={{backgroundImage:"url('"+item.thumb_text+"')"}}>
                                                                    <div className="imark" >
                                                                        <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                                    </div>
                                                                </div>
                                                                <div className="ibom">
                                                                    <h2>{item.title}</h2>
                                                                    <p>{this.state.data.title}</p>
                                                                    <p>{item.teacher_title}老师</p>
                                                                    <div className='idiv'>
                                                                        <img alt="" src="assets/imgs/shijian.png" />
                                                                        <h4>{item.start_time?item.start_time+"开始":"暂未设置开始时间"}</h4>
                                                                        <div>{item.nums}人参加</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                })
                                            }
                                        </div>
                                    </div>

                                    <div hidden={this.state.dType === 1}>
                                        <div className="none" hidden={this.state.data.courses.length !== 0}>
                                            <div className="cen">
                                                <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                            </div>
                                            <p>暂无机构课程</p>
                                        </div>

                                        <div className="list">
                                            {
                                                    this.state.data.courses.map((item,index)=>{
                                                        return <div className="item" key={index} onClick={()=>{this.gotoPage('/courseinfo?id='+item.id+"&teacher=1")}}>
                                                                    <div className="itop" style={{backgroundImage:"url('"+item.image_text+"')"}}>
                                                                        {/* <span>精品</span> */}
                                                                    </div>
                                                                    <div className="ibom">
                                                                        <h2>{item.title}</h2>
                                                                        <p>{this.state.data.title}</p>
                                                                        <p>{item.teacher_title}老师</p>
                                                                        <div className="idiv">
                                                                            <div>{item.nums}课</div>
                                                                            <span>{item.sale_num?item.sale_num:0}人参加</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                    })
                                                }
                                        </div>
                                    </div>

                                    
                                </div>
                                

                            </div>

                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
